<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03-基本选择器</title>
<style>
    #boss{
        color: deeppink;
        font-size: 30px;
    }
    .hero{
        color: deeppink;
        font-size: 40px;
    }
    span{
        color: blue;
    }
</style>
</head>
<body>

<!--
  内部样式/外部样式 有的, 但是行内样式没有

 # 三大基本选择器 (selector)
 0. 作用: 通过选择器,定位html中的一些标签

 1. id选择器
      1). 每个标签都有id属性,属性值必须唯一
      2). 语法
           #id值
           #boss -> 选中id=boss的标签
      3). 特点: 一般只选中一个标签

 2. class选择器 -> 类加载器
      1). 每个标签都有class属性,属性值可以重复,而且还可以设置多个值
      2). 语法
           .class值
            .female -> 选中class=female的一组标签

 3. 标签选择器
     语法: 标签名

选择器优先级:
     id > class > 标签

     特点: 定位越精确, 优先级越高
-->
<span class="female">古力娜扎</span>
<span class="female">迪丽热巴</span>
<span class="female hero">黑寡妇</span>

<span class="male hero">钢铁侠</span>
<span class="male hero">超人</span>


<span id="boss">灭霸</span>


</body>
</html>